<template>
	<div class="goods_list">
		<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
			<el-row>
				<el-col :span="6">
					<el-form-item prop="keyword" label="关键词:" style="width: 100%">
						<el-input maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item prop="productCategoryId" label="分类" style="width: 100%">
						<CateSelector v-model="searchForm.productCategoryId" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item>
						<div style="margin-left: 10px">
							<el-button type="primary" @click="init">搜索</el-button>
							<el-button @click="resetForm">重置</el-button>
						</div>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-table :data="tableData" table-layout="auto" style="width: 100%" height="480" class="sku_table" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column prop="pic" label="商品图">
				<template #default="scope">
					<img width="60" :src="scope.row.pic" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
			<el-table-column prop="skuCode" label="自编SKU" width="90" show-overflow-tooltip />
			<el-table-column prop="externalSku" label="外部SKU" width="90" show-overflow-tooltip />
			<el-table-column prop="supplierSku" label="供应商SKU" width="100" show-overflow-tooltip />
			<el-table-column prop="commissionRate" label="佣金比例" width="135" show-overflow-tooltip></el-table-column>
			<el-table-column label="价格">
				<template #default="scope">
					<p v-show="scope.row.usPrice !== undefined && scope.row.usPrice !== null">${{ scope.row.usPrice }}</p>
					<p v-show="scope.row.ukPrice !== undefined && scope.row.ukPrice !== null">£{{ scope.row.ukPrice }}</p>
					<p v-show="scope.row.euPrice !== undefined && scope.row.euPrice !== null">€{{ scope.row.euPrice }}</p>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip>
				<template #default="scope">
					<span>
						{{ $filters.timeFormat(scope.row.updateTime) }}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="onHandleSizeChange"
			@current-change="onHandleCurrentChange"
			class="mt15"
			:pager-count="5"
			:page-sizes="[10, 20, 30]"
			v-model:current-page="page.current"
			background
			v-model:page-size="page.pageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="page.total"
		>
		</el-pagination>
	</div>
</template>
<script setup name="GoodsListModal">
import CateSelector from '/@/components/common/CateSelector.vue';
import { useProductApi } from '/@/api/product';

const { getProdSkuList } = useProductApi();
const formDataRef = ref();
const searchForm = ref({});
const tableData = ref([]);
const page = ref({
	current: 1,
	pageSize: 10,
	total: 0,
});

const resetForm = () => {
	formDataRef.value.resetFields();
};

const init = async () => {
	let res = await getProdSkuList({ ...searchForm.value, commissionType: 0, ...page.value });
	if (res.code === 200) {
		const { data, total } = res.data;
		let tbData;
		tbData = data.map((item) => {
			item.isSort = false;
			item.isEdit = false;
			return item;
		});
		tableData.value = tbData;
		page.value.total = total;
	}
};

const productList = ref([]);
const handleSelectionChange = (list) => {
	console.log(list);
	productList.value = list;
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.pageNum = val;
};

onMounted(() => {
	init();
});

defineExpose({
	productList,
});
</script>
<style lang=""></style>
